Categories
JavaScript Best Practices

JavaScript Best Practices — Declaring and Using Variables

Spread the love

JavaScript is a very forgiving language. It’s easy to write code that runs but has issues in it.

In this article, we’ll look at best practices for declaring and using JavaScript variables.

Implicit Declarations

In JavaScript, if strict mode is off, then we can implicitly declare variables. We can reference variables without declaring it if it’s off, which isn’t good.

For instance, we can write:

foo = 1;

with strict mode off. This will declare a global variable foo , which can be accessed anywhere.

This isn’t good since it’s declared without using doing it and it’s global.

So we should turn on the strict mode in scripts as it’s a hazardous feature to use.

Declare All Variables with let or const

We should always declare all variables with let or const .

Use let for variables and const for constants.

const constants can’t be reassigned to a new value after it’s declared and we must set a value when we declare it.

For instance, we can write:

let x = 1;  
const y = 2;

We can also write:

let x;

Use Naming Conventions

Naming conventions for common suffixes o that we don’t use variables when only need one.

If we use Num as a suffix, then stick with that for numbers, for example.

Check Variable Names

We should check variables as they’re listed in editors and IDEs. Then we can remove variables that aren’t used.

Guidelines for Initializing Variables

Improper data initialization is a big source of problems in computer programs.

If we initialize them properly, we can save lots of debugging time.

If a variable has never been assigned a value, then we should assign one.

If it has an outdated value, then we need to update it.

If part of it has been assigned and another part isn’t then we need to set that part.

We can do that by setting properties or adding to arrays.

Initialize Each Variable as it’s Declared

We don’t have to set a value for let variables when we declare them, but we should set it since we’ll probably forget later.

Also, they should be near where they’re used since we may forget to use them if we don’t.

It also creates the impression that the variable is used throughout the code, which isn’t desirable.

Ideally, Declare and Define Each Variable Close to Where it’s First Used

This make us only declare variables when they’re needed.

It also let people know that the variable isn’t used throughout the code.

Photo by Tim Cooper on Unsplash

Use const When Possible

If we use const , then we can’t assign it to a new value.

However, we can still mutate the object inside.

Pay Special Attention to Counters and Accumulators

If we have counters and accumulators, then we should remember to reset them before they’re used again if necessary.

Initialize a Class’s Member Data in its Constructor

We should initialize all class’s instance variables in the constructor so that they’re ready to use anywhere.

For instance, we can write:

class Person {  
  constructor(name, age) {  
    this.name = name;  
    this.age = age;  
  }  
}

This makes this.name and this.age defined in all methods in the class.

Check the need for Reinitialization

If the value of a variable needs to be initialized, then we should use let . Otherwise, we use const .

Initialize Named Constants Once; Initialize Variables with Executable Code

We should declare named constants with const so that they can’t be reassigned to a new value.

If we have variables, they should be declared with let or const before the code that uses it in a function so that we can reinitialize it as the function is called.

Use Linter Setting that Automatically Initializes All Variables

We can use a linter to check that all variables are initialized.

This makes the process automatic so that we can avoid errors.

Take Advantage of Our Linter’s Warning Messages

Linters like ESLint has lots of rules that we can check to make sure that we’re declaring variables properly.

Therefore, we should take advantage of them so that we can fix improper variable declarations automatically when detected.

Conclusion

We should declare variables properly. It’s easy to do with a linter.

Implicit declarations are bad as they’re global. And we should use let and const to declare them instead.

Strict mode prevents implicit variable declarations.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *